<template>
  <div class="movie-container">
    <!-- this.route 是路由的“参数对象” -->
    <!-- this.router 是路由的“导航对象” -->
    <h4>Movie组件----{{ this.$route.params.id }}----{{ id }}</h4>

    <hr />

    <button @click="postApi">点击发送POST请求</button>
    <button @click="showThis">打印 this</button>
    <button @click="jumpByGo">后退</button>
  </div>
</template>

<script>
export default {
  // 接收 props 数据
  props: ['id'],
  methods: {
    async postApi() {
      const { data: res } = await this.$http.post('/api/post', { name: 'qq', age: 28 })
      console.log(res)
    },
    showThis() {
      console.log(this)
    },
    jumpByGo() {
      this.$router.go(-1) // 后退
      // this.$router.go(1) // 前进
    }
  }
}
</script>

<style lang="less" scoped>
.movie-container {
  background-color: skyblue;
  height: auto;
  padding: 10px;
}
</style>
